<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
</style>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./js/jquery.form.js"></script>
<script type="text/javascript" src="./js/calendar.js"></script>
<script type="text/javascript">
	var itemCount = 0;
	$(document).ready(function(){
		var cal = new Calendar("testClickDiv", getTasks);
		cal.showAndSelectDate(new Date());
	});
	
	function add(){
		itemCount++;
		var taskstr = '<tr id="newItem_'+itemCount+'"><td style="display: none"><input type="text" name="id" value=""/></td><td style="border-right:1px solid gray;border-bottom:1px solid gray;text-align:left;"><input style="width:96%;" type="text" name="description" value=""/></td><td style="border-right:1px solid gray;border-bottom:1px solid gray;text-align:left;"><input style="width:96%;" type="text" name="timeCost" value=""/></td><td style="border-right:1px solid gray;border-bottom:1px solid gray;"><input type="button" style="border:1px solid #363636;" value="Delete" onclick="del(\'newItem_'+itemCount+'\')"/></td></tr>';
		$("#tbTasks tbody").append(taskstr);
	}
	
	function del(id){
		$("#"+id).remove();
	}
	
	function getTasks(date){
		if(date){
			$("#actionTime").html(date);
			$("#actionDate").val(date);
		}
		var uid = $("#userId").val();
		var actionTime = $("#actionTime").html();
		$.ajax({
			type:"post",
			url:"getTask.do",
			dataType:"json",
			data:"userId="+uid+"&actionTime="+actionTime,
			success:function(date){
				$("#spanMsg").html("");
				if(date != null){
					var tbody = $("#tbTasks tbody");
					tbody.empty();
					$.each(date,function(entryindex,entry){
						var itemObj = $('<tr id="'+entry.id+'"><td style="display:none"><input style="width:98%;" type="text" name="id" value="'+entry.id+'"/></td><td style="border-right:1px solid gray;border-bottom:1px solid gray;text-align:left;"><input style="width:96%;" type="text" name="description" value="'+entry.description+'"/></td><td style="border-right:1px solid gray;border-bottom:1px solid gray;text-align:left;"><input style="width:96%;" type="text" name="timeCost" value="'+entry.timeCost+'"/></td><td style="border-right:1px solid gray;border-bottom:1px solid gray;">'+'<input type="button" style="border:1px solid #363636;" value="delete" onclick="deleteItem('+entry.id+')"/>'+'</td></tr>');
						tbody.append(itemObj);
					});
					$("#tbTasks").show();
				}
			}
		});
	}
	
	function deleteItem(id){
		$("#spanMsg").html("");
		$.ajax({
			type:"post",
			url:"delete.do",
			dataType:"text",
			data:"id="+id,
			success:function(date){
				if("success" == date){
					$("#"+id).remove();
				}else if("fail" == date){
					$("#spanMsg").html("Deleted Failed");
				}
			}
		});
	}

	function save(){
		$("#spanMsg").html("");
		if($("#tbTasks tbody tr").length == 0){
			$("#spanMsg").html("There is no task item in list");
			return;
		}
		var isValid = true;
		$("#fmTasks input").each(function(){
			var name = $(this).attr("name");
			var value = $(this).val();
			if(name == "description" && value == ""){
				$("#spanMsg").html("Description cannot be empty.");
				isValid = false;
				return false;
			}
			if(name == "timeCost"){
				if(value == ""){
					$("#spanMsg").html("Time cost cannot be empty.");
					isValid = false;
					return false;
				}else if(isNaN(parseInt(value))){
					$("#spanMsg").html("Time cost should be numeric.");
					isValid = false;
					return false;
				}
			}
		});
		if(!isValid){return;}
		var uid = $("#userId").val();
		var data = $("#fmTasks").formSerialize();
		data = data + "&userId=" + uid;
		$.ajax({
			type:"post",
			url:"save.do",
			dataType:"text",
			data:data,
			success:function(responseText){
				if(responseText!="SUCCESS"){
					$("#spanMsg").html(responseText);
				}else{
					$("#spanMsg").html("Saved successfully");
				}
			}
		});
	}
</script>
</head>
<body >
	<table align="center" cellpadding="0" cellspacing="0" style="width:70%;border-bottom:1px solid black;">
		<tr>
			<td style="text-align:left;padding-left:10px;padding-bottom:5px;">
				<span style="font-weight: bold;">Home</span>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="report.do">Report</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="user.do">User Management</a>
			</td>
		</tr>
	</table>
	<div  style="text-align: center;" >
				<table width="70%" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td style="text-align:left;padding-top:15px;padding-bottom:5px;">Please select user:
							<select id="userId" name="userId" onchange="getTasks()">
								<c:forEach var="user" items="${users}">
								    <option value="${user.id}">${user.name}</option>
								</c:forEach>
							</select>
							<div style="display:none;" id="actionTime" style="color:red"></div>
						</td>
					</tr>
					<tr>
						<td>
							<div id="testClickDiv" style="width:100%; text-align: center;" ></div>
						</td>
					</tr>
				</table>
				<span id="spanMsg" style="color: red">${queryMsg }</span>
				<div style="width:70%;text-align:left;margin-left:15%;" align="center">
					<span style="font-weight:bold;">Tasks for selected day:</span>
				</div>
			<form action="save.do" method="post" name="fmTasks" id="fmTasks">
				<input type="hidden" value="" id="actionDate" name="actionDate" />
				<table id="tbTasks" style="margin-top:3px;border-top:1px solid gray;border-left:1px solid gray;" width="70%" align="center" cellpadding="0" cellspacing="0">
					<thead>
					<tr style="background-color: #DDDDDD;color: black;font: bolder;height:25px;">
						<td style=" display: none;">Id</td>
						<td style="width:50%;border-right:1px solid gray;border-bottom:1px solid gray;">Description</td>
						<td style="width:25%;border-right:1px solid gray;border-bottom:1px solid gray;">TimeCost</td>
						<td style="width:25%;border-right:1px solid gray;border-bottom:1px solid gray;">Operate</td>
					</tr>
					</thead>
					<tbody>
					
					</tbody>
				</table>
				<br />
				<input type="button" onclick="save()" style="border:1px solid #363636;" value="Save"/>&nbsp;&nbsp;<input type="button" style="border:1px solid #363636;" value="Add" onclick="add()" />
			</form>
	</div>
</body>
</html>